import Btn from '../btn/btn.js'
import {TOGGLE_CLASS, SCROLL_LOCK_CLASS} from "../../js/constants.js";
// import dispatchEvent from "../../js/events";
// import {EVENT_MENU_OPEN} from "../../js/constants";

class Burger extends Btn {
    constructor() {
        super()
        this.classList.add('u-burger')
    }

    beforeRender() {
        this.setAttribute('size','fill')
        this.slot = '<div class="u-burger-icon"><i></i><i></i><i></i></div>'
    }
    
    afterOnClick() {
        if (this.menuId) {
            // Todo : we should replace this non agnostic pattern if we make the menu a web-component
            const menuElement =  document.getElementById(this.menuId)
            if (menuElement) {
                if (menuElement.classList.contains(TOGGLE_CLASS)) {
                    // dispatchEvent({ eventName: EVENT_MENU_CLOSE, args: { id: this.menu_id } })
                    menuElement.classList.remove(TOGGLE_CLASS)
                    document.body.classList.remove(SCROLL_LOCK_CLASS)
                } else {
                    // dispatchEvent({ eventName: EVENT_MENU_OPEN, args: { id: this.menu_id } })
                    menuElement.classList.add(TOGGLE_CLASS)
                    document.body.classList.add(SCROLL_LOCK_CLASS)
                }
            }
        }
    }
}

customElements.get('u-burger') || customElements.define('u-burger', Burger)

export default Burger